<template>
	<view class="container">
		<view style="display: flex;">
			<view class="" style="display: flex;">
				<u-icon name="/static/left.png" size="24" @click="back()" style="margin-left: -20rpx;margin-right: 20rpx;"></u-icon>
			</view>
			<view class="" style="margin-right: 40rpx;flex: 1;" >	
				<u-search placeholder="请输入游戏名称" searchIcon="/static/search.png" height="70rpx" :searchIconSize="18" bgColor="#F2F2F2"  @search="search" @custom="search" :actionStyle="{backgroundColor:'#13C6CD',color:'#FFFFFF',width:'120rpx',height:'70rpx',borderRadius:'50rpx',lineHeight:'70rpx',marginRight:'-50rpx',fontSize:'30rpx',fontWeight:600,marginLeft:'20rpx'}">
				</u-search>
			</view>
		</view>
		<view style="margin: 0 -20rpx;" v-if="this.gameList.length==0">
			<view class="" style="padding-top: 40rpx;">
				<view class="" style="padding: 0 20rpx;display: flex;justify-content: space-between;align-items: center;">
					<text style="font-weight: 600;font-size: 36rpx;">热门游戏</text>
					<image src="../../static/2jiant.png" style="width: 30rpx;height: 30rpx;" v-on:click="detail()"></image>
				</view>
				<view style="margin-top: 10rpx;">
					<view>
						<u-grid :border="false" col="4">
							<u-grid-item v-for="(listItem,listIndex) in categame" :key="listIndex" @click="navto(listItem.game_url)">
								<image :src="listItem.image" style="margin:20rpx 0;border-radius:20rpx;width: 128rpx;height: 128rpx;"></image>
								<text class="grid-text">{{listItem.name}}</text>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>
		</view>
		
		<view class="u-page" v-if="this.gameList.length>0">
			<u-list
				@scrolltolower="scrolltolower"
			>
				<u-list-item
					v-for="(item, index) in gameList"
					:key="index"
				>
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<view style="display: flex;align-items: center;">
						<view style="display: flex;margin-right: 20rpx;">
							<image v-if="index == 0" src="/static/phb1.png" style="margin:20rpx 0;width: 50rpx;height: 50rpx;"></image>
							<image v-if="index == 1" src="/static/phb12.png" style="margin:20rpx 0;width: 50rpx;height: 50rpx;"></image>
							<image v-if="index == 2" src="/static/phb13.png" style="margin:20rpx 0;width: 50rpx;height: 50rpx;"></image>
							<text v-if="index > 2" style="margin:20rpx 0;width: 50rpx;height: 50rpx;text-align: center;font-size: 36rpx;font-weight: 600;" >{{index+1}}</text>
						</view>
						<view style="display: flex;margin-right: 20rpx;">
							<image :src="item.image" style="margin:20rpx 0;border-radius:28rpx;width: 128rpx;height: 128rpx;"></image>
						</view>
						<view style="">
							<view class="gametext" style="font-size: 30rpx;font-weight: 600;">{{item.name}}</view>
							<view class="gametext" style="font-size: 24rpx;color: #6D747A;">{{item.intro}}</view>
							<view class="gametext" style="font-size: 24rpx;color: #6D747A;">{{item.catename}}</view>
						</view>
					</view>
					<view style="align-items: center;">
						<view style="background-color: #DDFAFC;color: #10C4CB;font-size: 24rpx;text-align: center;border-radius: 60rpx;line-height: 24rpx;display: inline-block;padding: 14rpx 40rpx;" v-on:click="navto(item.game_url)">秒玩</view>
					</view>
				</view>
				</u-list-item>
				<u-loadmore :status="status" nomoreText="我也是有底线的" :line="true" />
			</u-list>
			
		</view>
	</view>
</template>

<script>
	import {getRank,getCate,getSearchList} from  "@/api/api.js"
	export default {
		data() {
			return {
				keyword:'',
				page1:1,
				limit1:8,
				categame:[],
				page:1,
				limit:10,
				isEnd:false,
				status:'loading',
				gameList: [],
			};
		},
		onLoad(){
			this.show()
			this.getgame()
			// this.loadmore()
		},
		methods: {
			show(){
				getCate(1).then(res=>{
					this.tab = res.data
					this.cateId = res.data[0].id
					this.getgame();
				});
				
			},
			getgame(){
				getRank(this.page1,this.limit1).then(res=>{
					this.categame = res.data
				});
			},
			detail(val){
				uni.switchTab({
					url:'/pages/classify/classify'
				})
			},
			back(){
				uni.navigateBack();
			},
			scrolltolower() {
				
				if(!this.isEnd){
					this.page +=1;
					this.loadmore()
				}
				
			},
			loadmore() {
				getSearchList(this.page,this.limit,this.keyword).then(res=>{
					this.gameList.push(...res.data)
					if(res.data.length<this.limit){
						this.isEnd=true;
						this.status = 'nomore';
					}
					if(this.gameList.length==0){
						uni.showToast({
							icon:"none",
							title: '找不到相关游戏'
						});
					}
				});
			},
			navto(val){
				if (uni.getStorageSync('uid')){
					uni.navigateTo({
						url:'/pages/webview/webview?gameurl='+val
					})
				}else{
					uni.navigateTo({
						url:'/pages/login/index'
					})
				}
			},
			search(value){
				this.page = 1;
				this.keyword = value;
			    this.gameList = [];
				this.loadmore();
				console.log(this.keyword);
				console.log(this.gameList);
				console.log(this.gameList.length);
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #ffffff;
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
	.grid-text {
		text-align: center;
		font-size: 26rpx;
		font-weight: 600;
		font-family: 'MicrosoftYaHei';
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width:140rpx;
	}
	.gametext{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width:240rpx;
	}
</style>
